import React, { useEffect, useState } from 'react'
import { Button, Drawer, message, Modal, Space } from 'antd'
import useGetTableDataNoPagination from '@/hooks/useGetTableDataNoPagination'
import { getProductDevelopmentSeason, createDevelopmentSeason, deleteDevelopmentSeason } from '@/api/goods'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { ITableData, ITableDataArriavl } from '../types'
import { EditFormVertical } from '@/components/CustomForm'
import CustomTable from '@/components/CustomTable'
import { useNavigate, useSearchParams } from 'react-router-dom'
import dayjs from 'dayjs'
import { getReserveInvoiceWithPurchase, updateTransferRule } from '@/api/purchase'
import { useArrivalColumns } from '../columns'
import './index.less'
import { TRANSFER_TYPE_OPTIONS, TRANSFER_TYPE_TEXT } from '@/constant/purchase'
import { EditOutlined } from '@ant-design/icons'
import useModal from '@/hooks/useModal'
import { useAppSelector } from '@/store/hooks'
const Index = (props: { detailInfo: Record<string, any>; getDetail: () => void }) => {
  const navigate = useNavigate()
  const [FormEdit] = useForm()
  const [form] = useForm()
  const [isEdit, setIsEdit] = useState(false)
  const [query] = useSearchParams()
  const buttonCodeList = useAppSelector((state) => state.login.buttonCodeList) || []
  const id = query.get('id')
  const [isModalShow, setIsModalShow] = useState<boolean>(false)
  const [tableData, settableData] = useState<ITableDataArriavl[]>([])
  const TransferRulesModal = useModal({
    onSuccess: () => {
      message.success('操作成功')
      TransferRulesModal.closeModal()
    },
    onFail: () => {
      TransferRulesModal.closeModal()
    },
    onReload: () => {
      props?.getDetail()
    },
  })
  useEffect(() => {
    getData()
  }, [])
  const getData = async () => {
    const res = await getReserveInvoiceWithPurchase({
      purchaseOrderCode: props.detailInfo.purchaseOrderCode,
      id: props.detailInfo.id,
    })
    if (res.code === 200) {
      settableData(res.data)
    }
  }
  return (
    <PageContainer className="arrival_page_wrap">
      <div style={{ padding: '6px 16px 14px' }}>
        自动调拨规则：{TRANSFER_TYPE_TEXT[props?.detailInfo?.transferType]}
        {buttonCodeList?.includes('editDetailTransferRules') && (
          <EditOutlined
            style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 6 }}
            onClick={() => {
              props?.detailInfo?.transferType &&
                TransferRulesModal.form.setFieldValue('transferType', props?.detailInfo?.transferType)
              TransferRulesModal.openModal()
            }}
          />
        )}
      </div>
      <CustomTable
        bordered
        className="arrival_special_table_wrap"
        columns={useArrivalColumns()}
        dataSource={tableData}
        rowKey={(rows) => rows.reserveInvoiceCode}
      />
      <Modal
        title="修改调拨规则"
        open={TransferRulesModal.open}
        maskClosable
        onCancel={TransferRulesModal.closeModal}
        footer={
          <div className="flex_end">
            <Space>
              <Button onClick={TransferRulesModal.closeModal}>取消</Button>
              <Button
                type="primary"
                loading={TransferRulesModal.confirmLoading}
                onClick={() => {
                  TransferRulesModal.handleSubmit((vals) =>
                    updateTransferRule({
                      ...vals,
                      purchaseOrderCodes: [props.detailInfo.purchaseOrderCode],
                    }),
                  )
                }}
              >
                确定
              </Button>
            </Space>
          </div>
        }
      >
        <EditFormVertical
          editConfig={[
            {
              name: 'transferType',
              label: '调拨规则',
              type: 'Radio',
              placeholder: '请选择调拨规则',
              option: TRANSFER_TYPE_OPTIONS,
              rules: [
                {
                  required: true,
                  message: '请选择调拨规则',
                },
              ],
            },
          ]}
          form={TransferRulesModal.form}
          initialValues={{ transferType: 3 }}
        />
      </Modal>
    </PageContainer>
  )
}

export default Index
